<template>
  <div>
    <div>{{errorMsg}}</div>

    <!-- 菜单 -->
    <el-menu>
      <el-sub-menu class="el-sub-menu" v-for="(menu,index) in menuList" :index="index" v-bind:key="menu.id">
        <!-- 一级菜单：显示菜单名 -->
        <template #title>
          <span>{{ menu.title }}</span>
        </template>

        <!-- 二级菜单：单击切换功能页 -->
        <template v-for="(child) in menu.children" v-bind:key="child.id">
          <el-menu-item>

            <!-- router-link指定单击路由 -->
            <router-link :to="child.path">
              {{ child.title }}
            </router-link>
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>

import {ref,onMounted, reactive, toRefs} from "vue";
import http from "@/axios/http";
import qs from "qs";


let errorMsg = reactive("");
const menuList = ref([]);

// eslint-disable-next-line no-undef
const props = defineProps({
  roleid:Number
})

const {roleid} = toRefs(props);

onMounted(()=>{
  init()
})

function init() {
  const param = reactive({
    roleid: roleid
  });

  http.post('/lyy/getmenus', qs.stringify(param)).then((res) => {
    let resultmenu = res.data;
    if (resultmenu.result === "success")
      menuList.value = resultmenu.data;
    console.log(menuList)
    //动态加载路由

    if (menuList.value === null) {
      errorMsg = "获取菜单失败!";
    } else {
      errorMsg = "获取菜单失败!";
    }
  })
}
</script>

<style scoped>

</style>